<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Elmer I Fast build Admin dashboard for any platform</title>
	<meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework." />
	<meta name="keywords" content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, visualization, web app, application" />
	<meta name="author" content="hencework"/>

	<!-- Custom CSS -->
	<link href="dist/css/style.css" rel="stylesheet" type="text/css">
	<script src="dist/js/echarts.min.js"></script>

</head>
<body>

	<!--/Preloader-->
    <div class="wrapper  theme-1-active pimary-color-blue">
		<!-- Main Content -->
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default card-view">
					<div class="panel-heading">
						<div class="pull-left">
							<h6 class="panel-title txt-dark">统计各个城市招聘人数</h6>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="panel-wrapper collapse in">
						<div class="panel-body">
						<!--图表区域-->
							<div id="main" style="height: 600px"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
    <!-- /#wrapper -->
	
    <!-- jQuery -->
    <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<!-- Slimscroll JavaScript -->
	<script src="dist/js/jquery.slimscroll.js"></script>
	<!-- Fancy Dropdown JS -->
	<script src="dist/js/dropdown-bootstrap-extended.js"></script>	
	<!-- Owl JavaScript -->
	<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
	<!-- Switchery JavaScript -->
	<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>
	<!-- Init JavaScript -->
	<script src="dist/js/init.js"></script>

	
</body>
	<script>
		// 创建Echarts对象
		let mycharts = echarts.init(document.getElementById("main"));
		// ajax请求获取数据
		$.post("/lg/industry/countCityNums.do", function (data) {
			if(data.status == 0){
				mycharts.setOption({
					tooltip: {		//提示组件
						trigger: 'item', //触发类型  item 如果是散点图 饼图
						formatter: '{a} <br/>{b}: {c} ({d}%)' //代表提示悬浮窗的格式  {a}{b}{c}分别代表系列名，数据名，数值
					},
					legend: { //图例组件
						orient: 'vertical', //代表布局  vertical 水平布局
						left: 10,  //图例容器距离左边10像素
						data: data.data.cityNameList
					},
					series: [// 系列列表
						{
							name: '各个城市招聘人数',//系列名称
							type: 'pie',//图表类型  pie饼图
							selectedMode: 'single',//选中模式   single选中dange
							radius: [0, '35%'],//图标半径

							label: {//饼图标签的信息
								position: 'inner', //饼图扇区的展示信息
								fontSize: 14,
							},
							labelLine: {//标签视觉引导线
								show: false
							},
							data: data.data.thridList
						},
						{
							name: '各个城市招聘人数',
							type: 'pie',
							radius: ['45%', '60%'], //外层饼图
							labelLine: {
								length: 30,
							},
							label: {
								formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
								backgroundColor: '#F6F8FC',
								borderColor: '#8C8D8E',
								borderWidth: 1,
								borderRadius: 4,

								rich: { //自定义富文本样式
									a: {
										color: '#6E7079',
										lineHeight: 22,
										align: 'center'
									},
									hr: {
										borderColor: '#8C8D8E',
										width: '100%',
										borderWidth: 1,
										height: 0
									},
									b: {
										color: '#4C5058',
										fontSize: 14,
										fontWeight: 'bold',
										lineHeight: 33
									},
									per: {
										color: '#fff',
										backgroundColor: '#4C5058',
										padding: [3, 4],
										borderRadius: 4
									}
								}
							},
							data: data.data.dataList
						}
					]
				})
			}
		}, "json");
		//在回调函数中设置option
	</script>
</html>
